<template>
  <div class="app-list">
    <h5 class="app-list_title" v-if="appType == 1">男生</h5>
    <h5 class="app-list_title" v-if="appType == 2">女生</h5>
    <h5 class="app-list_title" v-if="appType == 3">出版</h5>
    <ul class="app-list_detail clearfix">
      <li class="app-list_detail_txt" v-for="item in appList">
        <p class="app-list_detail_txt_type">{{item.name}}</p>
        <p class="app-list_detail_txt_count">{{item.bookCount}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    appList: {
      type: Array,
      required: true
    },
    appType: {
      type: String,
      defalute: true
    },
  }
};
</script>
<style lang="scss" scoped>
  @function r($px) {
    @return ($px / 14 ) + rem;
  }
  .app-list {
    &_title {
      border-bottom: 1px solid #f3eded;
      padding-bottom: r(4);
    }
    &_detail {
      &_txt {
        position: relative;
        float: left;
        overflow: hidden;
        width: 33%;
        text-align: center;
        &_type{
          font-weight: 700;
          font-size: 1rem;
          margin-bottom: .1rem;
          margin-top: .8rem;
          line-height: 1.3rem;
        }
        &_count{
          color: #959595;
        }
      }
    }
  }
</style>
